<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="<%=basePath%>">
	<title>实时监控云平台登陆界面</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

	<link rel="stylesheet" href="css/assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/login/supersized.css">
	<link rel="stylesheet" href="css/login/login.css">

	<style type="text/css">
		html {
			height: 100%;
		}
		body {
			height: 100%;
			margin: 0;
			/*background: url(img/login-bg.jpg) no-repeat fixed center center;*/
			background-size: cover;
			-ms-behavior: url(css/login/backgroundsize.min.htc);
			behavior: url(css/login/backgroundsize.min.htc);
		}
		.main_box {
			height: 300px;
			position: absolute;
			background: hsla(0,0%,100%,0.75) border-box;
			overflow: hidden;
			border-radius: .3em;
			box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
			0 .5em 1em rgba(0, 0, 0, 0.6);
			text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
		}
		.main_box::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			margin: -30px;
			z-index: -1;
			-webkit-filter: blur(20px);
			filter: blur(20px);
		}

	</style>

	<script type="text/javascript" src="jquery/jquery-1.8.3.min.js" ></script>
	<script type="text/javascript" src="jquery/easyui1.4.2/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jquery/extJs.js" charset="utf-8"></script>
	<script type="text/javascript" src="js/login/tooltips.js"></script>
	<script type="text/javascript" src="js/login/login.js"></script>
	<script type="text/javascript" src="css/assets/js/bootstrap.min.js"></script>
	<script>

        function loginAnimate() {
            $('#loginform').hide();
            $('#logopic').hide();
            $('#logopic').fadeIn(1000);
            $('#logopic').animate({top:'5%'},"slow",function (){
                $('#loginform').fadeIn(1000);
            });

        }
        var sessionInfo_userId = '${sessionInfo.id}';
        console.log("sessionInfo_userId:"+sessionInfo_userId);
        if (sessionInfo_userId) {//如果登录,直接跳转到index页面
            window.location.href='user/session';
        }
        $(function() {
            var nowHour = new Date().getHours();
            if(nowHour > 6 && nowHour < 16){
//                document.write("白天！")
				$("#pic001").attr('src',"img/day001.jpg");
                $("#pic002").attr('src',"img/day002.jpg");
                $("#pic003").attr('src',"img/day003.jpg");
            }
            else if(nowHour >= 16 && nowHour < 19){
//                document.write("黄昏！")
                $("#pic001").attr('src',"img/dusk001.jpg");
                $("#pic002").attr('src',"img/dusk002.jpg");
                $("#pic003").attr('src',"img/dusk003.jpg");
            }
            else {
//                document.write("晚上！")
                $("#pic001").attr('src',"img/night001.jpg");
                $("#pic002").attr('src',"img/night002.jpg");
                $("#pic003").attr('src',"img/night003.jpg");
            }

            $('#formbackground').height($(window).height());
            $('#formbackground').width($(window).width());
            loginAnimate();
            $('#loginform').form({
                url:'user/login',
                onSubmit : function() {
                    progressLoad();
                    var isValid = $(this).form('validate');
                    if(!isValid){
                        progressClose();
                    }
                    return isValid;
                },
                success:function(result){
                    result = $.parseJSON(result);
//                    alert("result:"+result.success);
                    progressClose();
                    if (result.success) {
                        window.location.href='user/session';
                    }else{
                        $.messager.show({
                            title:'提示',
                            msg:'<div class="light-info"><div class="light-tip icon-tip"></div><div>'+result.msg+'</div></div>',
                            showType:'show'
                        });
                    }
                }
            });
        });
        $(window).on('resize', function () {
//            var iHeight = document.documentElement.clientHeight||document.body.clientHeight;
//            $('#formbackground').height($(window).height());
//            $('#formbackground').width($(window).width());
            $('#formbackground').css('height','100%');
            $('#formbackground').css('width','100%');
		});
        function submitForm(){
            $('#loginform').submit();
        }

        function clearForm(){
            $('#loginform').form('clear');
        }

        //回车登录
        function enterlogin(){
            if (event.keyCode == 13){
                event.returnValue=false;
                event.cancel = true;
                $('#loginform').submit();
            }
        }

	</script>

</head>

<body onkeydown="enterlogin();" style="padding:0px;">
<%--<div id="formbackground" class="img-responsive" style="position:absolute; z-index:-1;width: 100%;height:100%;--%>
		<%--background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(${ctx}/img/login-bg.jpg,  sizingMethod='scale');">--%>
<%--</div>--%>
<div id="formbackground" class="carousel slide" style="position:absolute; z-index:-1;width: 100%;height:100%;" data-ride="carousel" data-interval="3000">
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<img id="pic001" src="img/day001.jpg" style="width: 100%;height: 100%;" alt="First slide">
		</div>
		<div class="item">
			<img id="pic002" src="img/day002.jpg" style="width: 100%;height: 100%;" alt="Second slide">
		</div>
		<div class="item">
			<img id="pic003" src="img/day003.jpg" style="width: 100%;height: 100%;" alt="Third slide">
		</div>
	</div>
</div>


<div class="page-container">
	<div class="main_box" > <%--style="background:url(img/square.png)"--%>
		<div class="login_box">
			<div class="login_logo">
				<h1 id="logopic"  style="font-family: '黑体';top: 38%;left: 30%;position: absolute;">实时监控云平台
				</h1>
			</div>

			<div class="login_form">
				<form action="index.html" id="loginform" method="post">
					<img src="css/assets/avatars/user_ico.png" style="position: absolute; width: 15%; top: 38%;left: 7%;"/>
					<div class="form-group">
						<label for="j_username" class="t"> </label>
						<input class="form-control x319 in" type="text" name="loginName" data-options="required:true" value="admin" />
					</div>
					<div class="form-group">
						<label for="j_password" class="t"> </label>

						<input class="password form-control x319 in" type="password" name="password" value="" />
					</div>

					<div style="text-align:center">
						<button class="btn btn-primary btn-lg"  type="button" onclick="submitForm()" style="margin-right:33px;margin-top:15px">&nbsp;登&nbsp;录&nbsp</button>
						<input type="reset" value="&nbsp;重&nbsp;置&nbsp;" class="btn btn-default btn-lg" style="margin-top:15px">
					</div>
				</form>
			</div>

		</div>
		<div class="bottom"  style="display: none;">Copyright &copy; 2017 - 2018 <a href="#">系统登陆</a></div>
	</div>
</div>
</body>
</html>